<template>
	<view>
		<view class="smart-container">1.容器</view>
		<view class="smart-panel-h" @click="goDetailPage('view')">
			<text>view视图</text>
		</view>
		<view>
			<!-- 只能用单引号，不能用双引号，是因为click这里是用“”，如果再用，就会被截断 -->
			<view class="smart-panel-h" @click="goDetailPage('scroll_view')">
				<text>scroll-view滚动视图</text>
			</view>
			<view class="smart-panel-h" @click="goDetailPage('swiper')">
				<text> swiper可滚动视图</text>
			</view>
		</view>
		<view>
			<view class="smart-container">
				2.基础内容
			</view>
			<view class="smart-panel-h" @click="goDetailPage('text')">
				text文本编辑
			</view>
			<view class="smart-panel-h" @click="goDetailPage('icon')">
				icon图标
			</view>
		</view>
		<view>
			<view class="smart-container">
				3.表单组件
			</view>
			<view class="smart-panel-h" @click="goDetailPage('botton')">
				botton按钮
			</view>
			<view class="smart-panel-h" @click="goDetailPage('checkbox')">
				checkbox多选框
			</view>
			<view class="smart-panel-h">
				label标签组件
			</view>
			<view class="smart-panel-h" @click="goDetailPage('input')">
				input输入框
			</view>
			<view class="smart-panel-h">
				textarea多行文本输入框
			</view>
			<view class="smart-panel-h">
				form表单
			</view>
		</view>
		<view>
			<view class="smart-container">
				4.导航组件
			</view>
			<view class="smart-panel-h" @click="goDetailPage('navigatior')">
				navigation导航
			</view>
		</view>
		<view>
			<view class="smart-container">
				5.媒体组件
			</view>
			<view class="smart-panel-h" @click="goDetailPage('image')">
				image图片
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow() {
			// 同步
			const name =uni.getStorageSync('username');
			console.log("同步：",name)
			
			// 异步
			// uni.getStorage({
			// 	key: "username",
			// 	success: function(result) {
			// 		console.log("获取本地缓存成功：" + result.data);
			// 	},
			// })
		},
		methods: {
			goDetailPage(e) {
				if (typeof e === 'string') {
					uni.navigateTo({
						url: '/pages/components/' + e + '/' + e
					})
				} else {
					uni.navigateTo({
						url: e.url
					})
				}
			}
		}
	}
</script>

<style>
	.smart-innel-panel {
		background-color: aqua;
		flex-direction: row;
		align-items: center;
		padding: 5px;
	}
</style>